<template>
  <t-row :gutter="[16, 16]">
    <t-col :xs="12" :xl="9">
      <div>
        <t-card title="事件" class="dashboard-rank-card" :bordered="false" style="height: 800px">
          <!--          <template #actions>-->
          <!--            <t-radio-group default-value="ts">-->
          <!--              <t-radio-button value="ts">投诉建议</t-radio-button>-->
          <!--              <t-radio-button value="wx">申报维修</t-radio-button>-->
          <!--            </t-radio-group>-->
          <!--          </template>-->
          <t-table :data="List" :columns="listColumns" :pagination="pageInfo">
            <template #index="{ rowIndex }">
            <span class="dashboard-rank__cell">
              {{ rowIndex + 1 }}
            </span>
            </template>
            <template #operation>
              <t-button @click="handleNav('/announcement')">详情</t-button>
            </template>
          </t-table>
          <br/>
        </t-card>
      </div>
    </t-col>
    <t-col :xs="12" :xl="3">
      <t-card title="居住情况" subtitle="居住占比" class="dashboard-chart-card" :bordered="false">
        <div
            id="countContainer1"
            :style="{ width: `${resizeTime * 280}px`, height: `${resizeTime * 303}px`, margin: '0 auto' }"
        ></div>
      </t-card>
      <t-card title="居住情况" subtitle="自住出租占比" class="dashboard-chart-card" :bordered="false">
        <div
            id="countContainer2"
            :style="{ width: `${resizeTime * 280}px`, height: `${resizeTime * 303}px`, margin: '0 auto' }"
        ></div>
      </t-card>
    </t-col>
  </t-row>
</template>
<script>

import {TooltipComponent, LegendComponent, GridComponent} from 'echarts/components';
import {PieChart, LineChart, BarChart} from 'echarts/charts';
import {CanvasRenderer} from 'echarts/renderers';
import * as echarts from 'echarts/core';


echarts.use([TooltipComponent, LegendComponent, PieChart, GridComponent, LineChart, CanvasRenderer, BarChart]);

export default {
  name: 'MiddleChart',
  computed: {},
  components: {},
  methods: {
    getRankClass(index) {
      return ['dashboard-rank__cell', {'dashboard-rank__cell--top': index < 3}];
    },
    handleNav(url) {
      this.$router.push(url).catch(err => err);
    },
  },
  data() {
    return {
      pageInfo: {
        pageSizeOptions: [5, 10],
        total: 12,
        current: 1,
        pageSize: 10,
      },
      resizeTime: 1,
      List:
          [
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: '测试新增',
              status: '投诉',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: '测试新增',
              status: '投诉',
              date: '2023-06-22',
            },
            {
              something: '测试新增',
              status: '投诉',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: '测试新增',
              status: '投诉',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
            {
              something: '测试新增',
              status: '投诉',
              date: '2023-06-22',
            },
            {
              something: 'Feedback content',
              status: '维修',
              date: '2023-06-22',
            },
          ],
      listColumns: [
        {
          align: 'center',
          colKey: 'index',
          title: '编号',
          width: 80,
          fixed: 'left',
        },
        {
          align: 'left',
          ellipsis: true,
          colKey: 'something',
          title: '内容',
          minWidth: 200,
        },
        {
          align: 'center',
          colKey: 'status',
          title: '状态',
          width: 100,
        },
        {
          align: 'center',
          colKey: 'date',
          width: 140,
          title: '时间',
        },
        {
          align: 'center',
          colKey: 'operation',
          title: '操作',
          width: 80,
          fixed: 'right',
        },
      ],

    }
  },
  mounted() {
    let echart1 = echarts.init(document.getElementById('countContainer1'));
    let echart2 = echarts.init(document.getElementById('countContainer2'));
    let option1 = {
      color: ['#0052d9', '#d9e1ff'],
      legend: {
        selectedMode: false,
        itemWidth: 12,
        itemHeight: 4,
        textStyle: {
          fontSize: 12,
        },
        left: 'center',
        bottom: '0',
        orient: 'horizontal', // legend 横向布局。
      },
      series: [
        {
          type: 'pie',
          radius: ['0%', '40%'],
          avoidLabelOverlap: true,
          selectedMode: true,
          hoverAnimation: true,
          silent: true,
          itemStyle: {
            borderWidth: 1,
          },
          label: {
            show: true,
            formatter: ['{value|{d}%}', '{name|{b}占比}'].join('\n'),
            rich: {
              value: {
                fontSize: 12,
                fontWeight: 'normal',
                lineHeight: 25,
              },
              name: {
                color: '#909399',
                fontSize: 10,
                lineHeight: 15,
              },
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {value: 300, name: '已入住'},
            {value: 100, name: '未入住'},
          ],
        },
      ],
    }
    let option2 = {
      color: ['#0052d9', '#d9e1ff'],
      legend: {
        selectedMode: false,
        itemWidth: 12,
        itemHeight: 4,
        textStyle: {
          fontSize: 12,
        },
        left: 'center',
        bottom: '0',
        orient: 'horizontal', // legend 横向布局。
      },
      series: [
        {
          type: 'pie',
          radius: ['0%', '40%'],
          avoidLabelOverlap: true,
          selectedMode: true,
          hoverAnimation: true,
          silent: true,
          itemStyle: {
            borderWidth: 1,
          },
          label: {
            show: true,
            formatter: ['{value|{d}%}', '{name|{b}占比}'].join('\n'),
            rich: {
              value: {
                fontSize: 12,
                fontWeight: 'normal',
                lineHeight: 25,
              },
              name: {
                color: '#909399',
                fontSize: 10,
                lineHeight: 15,
              },
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            {value: 190, name: '自住'},
            {value: 110, name: '出租'},
          ],
        },
      ],
    }
    echart1.setOption(option1);
    echart2.setOption(option2);
  }
}
</script>
<style lang="less" scoped>
@import '@/style/variables.less';

.dashboard-rank-card {
  padding: 8px;

  /deep/ .t-card__header {
    padding-bottom: 24px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }
}

.dashboard-rank__cell {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: white;
  font-size: 14px;
  background-color: #0052d9;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.dashboard-chart-card {
  padding: 8px;

  /deep/ .t-card__header {
    padding-bottom: 24px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }
}

.dashboard-overview-card {
  /deep/ .t-card__header {
    padding-bottom: 24px;
  }

  /deep/ .t-card__title {
    font-size: 20px;
    font-weight: 500;
  }

  &.overview-panel {
    border-right: none;
  }

  &.export-panel {
    border-left: none;
  }
}

.inner-card {
  padding: 24px 0;

  /deep/ .t-card__header {
    padding-bottom: 0;
  }

  &__content {
    &-title {
      font-size: 36px;
      line-height: 44px;
    }

    &-footer {
      display: flex;
      align-items: center;
      line-height: 22px;
      color: var(--td-text-color-placeholder);

      .trend-tag {
        margin-left: 4px;
      }
    }
  }
}
</style>
